<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <TodoHeaderVue v-on:addEVENT="fn" />
    <!-- 列表区域 -->
    <TodoMainVue :list="list" @delEVENT="del" />
    <!-- 统计和清空 -->
    <TodoFooterVue :list="list" @clear_event="clear"  />
  </section>
</template>

<script>
import TodoFooterVue from './components/TodoFooter.vue'
import TodoHeaderVue from './components/TodoHeader.vue'
import TodoMainVue from './components/TodoMain.vue'

export default {
  components: {
    TodoFooterVue,
    TodoHeaderVue,
    TodoMainVue
  },
  data () {
    return {
      // list:  JSON.parse(localStorage.getItem('hm_vue_jichu')) || []
      list: []
    }
  },
  created(){
    // if--else语句。 三元表达式。 逻辑中断
    // this.list = localStorage.getItem('hm_vue_jichu') ? JSON.parse(localStorage.getItem('hm_vue_jichu')) : []
    this.list = JSON.parse(localStorage.getItem('hm_vue_jichu')) || []
  },
  methods: {
    fn(e) {
      this.list.push({
        // 因为list里面的对象 都是 id 和name的形式。然后id有作为了key
        // 所以我们自己写的id必须唯一，一般使用时间戳
        id: Date.now(),
        name: e
      })
    },
    del(e) {
      this.list.splice(e, 1)
    },
    clear() {
      this.list = []
    }
  },
  watch: {
    // list: function(newVal,oldVal) {}
    // list(newVal,oldVal) {}
    list: {
      handler(newVal){
        localStorage.setItem('hm_vue_jichu', JSON.stringify(newVal))
      },
      deep: true, // 针对于数据是复杂数据类型的时候，开启深度监听
      // immediate: true 已进入页面就执行一次 回调函数
    }
  }
}
</script>

<style>

</style>
